<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>QQ扫码登入测试</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #BFBFBF;
        }
        .content {
            width: 200px;
            height: 200px;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            margin-top: -150px; 
        }
    </style>
			<script type="application/javascript">
			function verify(){
				$.post("/qq/verifyqr",function(result){
					console.log("code = "+result.code)
					if(result.code == '0'){
						$("#info").html('使用QQ扫码二维码');
					}else if(result.code == '1'){
						$("#info").html('认证中');
					}else if(result.code == '2'){
						$("#info").html('登入成功');
						clearInterval(task);
						console.log("定时器关闭")
						var tx = "https://q1.qlogo.cn/g?b=qq&nk="+result.qq+"&s=200&t="+new Date().getTime();
						$("img").attr("src",tx);
						$("#info").html('登入成功<br/>'+result.qq+'<BR/>'+result.name+'');
					}else{
						$("img").attr("src","");
						console.log("刷新二维码")
						$("img").attr("src","/qq/updateqr?time="+new Date().getTime());	
					}
				});
			}
			
			task = setInterval(verify,1000)
		</script>

	</head>

	<body >
			<div class="content">
				<img src="/qq" width="200px;" height="200px;"/><br/>
				<center>
				<span id="info" style="color: red;font-size: 20px;">QQ扫描登入</span>
				</center>
			</div>
			
	</body>

</html>